<template>
  <div class="box">
    <el-form :model="form"  label-width="135px">
      <h3>基本信息</h3>
      <!-- //基本信息表单部分 -->
      <el-row :gutter="40">
        <el-col :span="11">
          <el-form-item label="标名：" required>
            <label>{{ form.name }}</label>
          </el-form-item>
          <el-form-item label="借款方：" required>
            <label>{{ form.userPhone }}</label>
          </el-form-item>
          <el-form-item label="年利率：" required>
            <label>{{ form.apr }}</label>
          </el-form-item>
          <el-form-item label="期限天数：" required>
            <label>{{ form.loanPeriod }}</label>
          </el-form-item>
          <el-form-item label="借款管理月费率：" required>
            <label>{{ form.loanMgrInterestRate }}</label>
          </el-form-item>
          <el-form-item label="逾期罚息利率：" required>
            <label>{{ form.overdue }}</label>
          </el-form-item>
          <el-form-item label="资金用途：" required>
            <label>{{ form.useOfFunds }}</label>
          </el-form-item>
        </el-col>

        <el-col :span="11">
          <el-form-item label="风险等级：" required>
            <label>{{ form.riskLevel }}</label>
          </el-form-item>
          <el-form-item label="借款总金额：" required>
            <label>{{ form.total }}</label>
          </el-form-item>
          <el-form-item label="还款方式：" required>
            <label>{{ form.repayment }}</label>
          </el-form-item>
          <el-form-item label="借款起息方式：" required>
            <label>{{ form.interestWay }}</label>
          </el-form-item>
          <el-form-item label="借款类型：" required>
            <label>{{ form.loanType }}</label>
          </el-form-item>
          <el-form-item label="还款来源：" required>
            <label>{{ form.asd }}</label>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 担保信息 -->
      <h3>担保信息</h3>
      <el-row :gutter="40">
        <el-col :span="11">
          <el-form-item label="是否担保：">
            <label>{{ form.guaranteed }}</label>
          </el-form-item>
          <el-form-item label="是否抵押：">
            <label>{{ form.mortgageType }}</label>
          </el-form-item>
        </el-col>

        <el-col :span="11">
          <el-form-item label="担保机构：">
            <label>{{ form.guaranteeAgency }}</label>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 借款资料 -->
      <h3>借款资料</h3>
      <el-row>
        <el-col>
          <el-form-item label="借款资料：">
            <ImageList :imageList="form.loanInformation"></ImageList>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form :model="ruleForm" :rules="rules" ref="rules" label-width="135px">
   <!-- 审核 -->
      <h3>审核</h3>
      <el-row>
        <el-col>
          <el-form-item label="是否通过：">
            <el-radio-group v-model="ruleForm.approved">
              <el-radio :label=false>否</el-radio>
              <el-radio :label=true>是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="备注：" prop="remark">
            <div class="btn">
              <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="ruleForm.remark"
              maxlength="300"
              show-word-limit
              :rows="8"
              style="width: 60%"
            >
            </el-input>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

    
        <div class="across"></div>
        <div class="keystroke"> 
          <el-row> 
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button type="success" @click="handleReturn">返回</el-button>
          </el-row>
        </div>
      
      
    </el-form>
  </div>
</template>

<script>

import {getLoanById,reviewLoan } from "../../http/loan";
import ImageList from "../../components/loan/ImageList.vue";

export default {
  name: "Loan",
  components:{
    ImageList
  },
  data() {
    return {
      form: this.getInitRoleForm(),
       rules:{
         remark: [
          { required: true, message: "请输入内容", trigger: "change" },
        ],
       },
      ruleForm:{
        approved:false,
        remark:""
      },
      formData: {},
    };
  },
  methods:{
    handleSubmit(){
      this.$refs.rules.validate(valid => {
        if(valid){
           console.log("提交")
      let baseInfoId = this.$route.params.id;
      reviewLoan({
        baseInfoId,
        ...this.ruleForm
      }).then(res => {
        if(res.data.code == 20000) {
          this.$router.push("/loan/loanreview")
          this.$message.success("提交成功");
        }else {
          this.$message.error("提交失败！");
        }
      }).catch(err => {
        console.err(err);
        this.$message.error("提交失败！");
      });
        }else{
          this.$message.error("请按规则填写表单！");
        }
      })
    },
    handleReturn(){
      console.log("返回")
            this.$router.push("/loan/loanreview")
    }
  },
  watch: {
    formData() {
      this.form = this.getInitRoleForm();
    },
  },
  beforeMount(){
    let id = this.$route.params.id;
    if(!this._.isUndefined(id)){
      getLoanById(id).then(res => {
        console.log("getLoanById:",res)
        if(res.data.code == 20000){
          console.log(res)
          this.formData = res.data.data.info
        }else {
          this.$message.error("请求标的详细信息出错！")
        }
      }).catch(err => {
        console.err(err)
        this.$message.error("请求标的详细信息出错！")
      })
    }
  },
  beforeCreate() {
    const defaultData = {
      apr: "", //年利率
      asd: "", //还款方式
      interestWay: "",
      loanMgrInterestRate: "", //借款管理月利率
      loanPeriod: "", //借款期限 （天）
      loanType: "", //借款类型
      name: "", //标名
      overdue: "", //逾期罚息利率
      repayment: "", //还款方式
      riskLevel: "", //风险等级
      termType: "", //期限类型（天）
      total: "", //借款金额
      useOfFunds: "", //资金用途
      userPhone: "", //借款人联系方式
      guaranteeAgency:"",//担保机构
      guaranteed:"",//是否担保
      mortgageType:""//是否抵押
    };

    this.getInitRoleForm = function () {
      if (this._.isEmpty(this.formData)) return defaultData;
      let obj = {},
        formCopy = this._.cloneDeep(this.formData);
      for (let key in defaultData) {
        obj[key] = formCopy[key];
      }
      obj.guaranteed = formCopy.guarantee.guaranteed ? "是" : "否"
      obj.guaranteeAgency = formCopy.guarantee.guaranteeAgency
      obj.mortgageType = formCopy.guarantee.mortgageType ? "是" : "否"
      obj.loanInformation = formCopy.loanInformation.split(",")
      return obj;
    };
  },
};
</script>
  
<style scoped>
.box {
      width: 91%;
      margin: 80px 90px;
    }
.keystroke {
      width: 260px;
      height: 15px;
      margin-top: 30px; 
      margin-left:auto;
      margin-right:auto;
    }
.across {
      width: 95%;
      border-top: 1px solid rgb(194, 186, 186);
    }
</style>